'use client'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { getAllThemes } from '@/lib/theme-config'
import { motion } from 'framer-motion'
import { Check, Moon, Palette, Sun } from 'lucide-react'
import { useTheme } from './theme-provider'

export function ThemeSwitcher() {
  const { theme, setTheme, isDark, setIsDark } = useTheme()
  const themes = getAllThemes()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className="gap-2">
          <Palette className="size-4" />
          <span className="hidden sm:inline">主题</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-56">
        <DropdownMenuLabel className="flex items-center gap-2">
          <Palette className="size-4" />
          选择主题色彩
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        
        {/* 主题色选择 */}
        <div className="p-2 space-y-1">
          {themes.map((themeConfig) => (
            <motion.div
              key={themeConfig.id}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
            >
              <DropdownMenuItem
                onClick={() => setTheme(themeConfig.id)}
                className="flex items-center gap-3 p-3 cursor-pointer"
              >
                <div className="flex items-center gap-3 flex-1">
                  <div
                    className="size-4 rounded-full border border-border"
                    style={{ backgroundColor: themeConfig.hex }}
                  />
                  <div className="flex flex-col">
                    <span className="text-sm font-medium">
                      {themeConfig.name}
                    </span>
                    <span className="text-xs text-muted-foreground">
                      {themeConfig.description}
                    </span>
                  </div>
                </div>
                {theme === themeConfig.id && (
                  <motion.div
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    transition={{ type: "spring", stiffness: 500, damping: 30 }}
                  >
                    <Check className="size-4 text-primary" />
                  </motion.div>
                )}
              </DropdownMenuItem>
            </motion.div>
          ))}
        </div>

        <DropdownMenuSeparator />
        
        {/* 明暗模式切换 */}
        <DropdownMenuItem
          onClick={() => setIsDark(!isDark)}
          className="flex items-center gap-3 p-3 cursor-pointer"
        >
          <div className="flex items-center gap-3 flex-1">
            {isDark ? (
              <Moon className="size-4" />
            ) : (
              <Sun className="size-4" />
            )}
            <span className="text-sm font-medium">
              {isDark ? '深色模式' : '浅色模式'}
            </span>
          </div>
          <Badge variant="secondary" className="text-xs">
            {isDark ? '深色' : '浅色'}
          </Badge>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

/**
 * 简化版主题切换器 - 仅显示颜色圆点
 */
export function CompactThemeSwitcher() {
  const { theme, setTheme } = useTheme()
  const themes = getAllThemes()

  return (
    <div className="flex items-center gap-2 p-2 bg-background/50 backdrop-blur-sm rounded-lg border">
      {themes.map((themeConfig) => (
        <motion.button
          key={themeConfig.id}
          onClick={() => setTheme(themeConfig.id)}
          className={`size-6 rounded-full border-2 transition-all ${
            theme === themeConfig.id
              ? 'border-foreground scale-110'
              : 'border-border hover:border-foreground/50'
          }`}
          style={{ backgroundColor: themeConfig.hex }}
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.95 }}
          title={themeConfig.name}
        >
          {theme === themeConfig.id && (
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              className="size-full rounded-full flex items-center justify-center"
            >
              <Check className="size-3 text-white drop-shadow-sm" />
            </motion.div>
          )}
        </motion.button>
      ))}
    </div>
  )
}